<template>
  <div class="dis">
       <dl>
        <dt>
          <img :src="item.img" alt="" />
        </dt>
        <dd>
          <p><b>{{item.title}}</b></p>
          <p>￥{{item.num}}</p>
          <p>{{item.desc}}</p>
          <button @click="car(item.id)">加入购物车</button>
        </dd>
      </dl>
      <p>个人信息</p>
      <p>
        <b>姓名</b>
        <input type="text" ref="inp" placeholder="输入你的真实姓名">
      </p>
      <p>
        <b>手机</b>
         <input type="text" ref="inps" placeholder="输入你的真实手机号码">
      </p>
      <p>
        <b>城市</b>
        <input @focus="foucs" type="text" v-model="citylist">
      </p>
      <button @click="sub">咨询最低价</button>
      <ul ref="ul">
        <li v-for="(v,i) in data" :key="i"
        @click="uli(v)"
        >{{v.name}}</li>
      </ul>
      <div class="olis"  ref="olis">
         <ol ref="ol" @click="oli">
           <li v-for="(v,i) in city.areaList" :key="i" @click="ocity(v)">{{v.name}}</li>
         </ol>
      </div>
      <!-- <pre>{{city}}</pre> -->
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import {mapState} from 'vuex'
import data from '../../mock/city.json'
  export default {
    name: 'Detail',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        data:data,
        city:[],
        citylist:'上海',
        id:''
      }
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState(['item'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      car(id){
        this.$store.commit('GET_CAR',id)
        this.$router.push({name:'Car'})
      },
      // 跳转咨询最低价界面
      sub(){
        if(this.$refs.inp.value!==''&&this.$refs.inps.value!==''){
          this.$router.push({name:'List'})
        }else{
           alert('姓名和手机号不能为空')
        }
      },
      // 聚焦显示蒙层
      foucs(){
        this.$refs.ul.style.display='block'
      },
      // 显示二级蒙层
      uli(v){
        this.$refs.olis.style.display='block'
        this.$refs.ol.style.display='block'
        this.city=v
      },
      // 关闭所有蒙层
      oli(){
        this.$refs.olis.style.display='none'
        this.$refs.ol.style.display='none'
         this.$refs.ul.style.display='none'
      },
      // 选中城市
      ocity(v){
       this.citylist=v.name

      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }
  dl{
    width: 100%;
    dt{
      width: 100%;
      height: 220px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .dis{
    width: 100%;
    height: 800px;
    position: relative;
    overflow: hidden;
  }
  ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #fff, $alpha: 1);
    display: none;
    z-index: 99;
    overflow: scroll;
    overflow: hidden;
  }
  ul li{
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
     padding: 0 20px;
  }
  .olis{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000, $alpha: .4);
    display: none;
    z-index: 101;
    // overflow: scroll;
  }
  ol{
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: rgba($color: #fff, $alpha: 1);
    display: none;
    z-index: 150;
  }
  ol li{
     width: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding: 0 20px;
  }
</style>